<template>
	<view class="page bg-white">
		<fu-custom bgColor="bg-white" :isBack="true">
			<view slot="content">{{i18n['评价']}}</view>
		</fu-custom>
		<view class="comment-item-list">
			<block v-for="(item, index) in order_goods_list" :key="index">
				<view class="comment-item">
					<view class="plr-24 bg-white">
						<view class="flex overHidden padding-tb solid-bottom">
							<view class="block-200">
								<fu-image radius="16rpx" :src="item.goods_thumb" mode="aspectFill"></fu-image>
							</view>
							<view class="padding-left-sm flex-sub flex flex-direction justify-between overHidden">
								<view>
									<text class="text-df text-333 text-cut-2">{{ item.goods_name }}</text>
									<text class="text-sm text-999">{{item.sku_name}}</text>
								</view>
								<view class="flex justify-between align-center">
									<text class="text-theme">
										<text class="text-price text-sm"></text>
										<text class="text-lg">{{item.shop_price}}</text>
									</text>
									<text>x{{item.num}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="h-110 plr-24">
						<view class="h-110 flex align-center justify-between solid-bottom">
							<view>{{i18n['商品评价']}}</view>
							<view>
								<fu-star voidColor="#EBEBEB" color="#FFA20D" :value="commentsArray[index].star"
									@change="changeLevel($event,index)"></fu-star>
							</view>
						</view>
					</view>
					<view class="plr-24">
						<textarea maxlength="200" class="textarea-box margin-top" :placeholder="i18n['请输入您的评价']"
							placeholder-class="placeholderClass2" v-model="commentsArray[index].content"></textarea>
					</view>
					<view class="margin-top plr-24">
						<text class="text-lg text-333">{{i18n["添加照片"]}}</text>
						<text class="text-sm text-bf ml-16">{{i18n['最多可上传9张']}}</text>
					</view>
					<view class="margin-top-sm">
						<fu-upload :col="4" :max="9" @change="chooseImages($event,index)"></fu-upload>
					</view>
					<!-- <view class="floor_imgs margin-top">
            <view class="floor-title">{{i18n['添加视频']}}</view>
            <fu-upload-video
              :col="4"
              :video="commentsArray[index].video"
              @change="chooseVideo($event,index)"
            ></fu-upload-video>
          </view> -->
					<view class="plr-24 margin-top-sm flex margin-bottom">
						<view @tap="handleSwitch(index)">
							<image v-if="!commentsArray[index].anonymous" class="block-32"
								:src="imgWechatUrl+'/order/icon-select-1.png'"></image>
							<image v-else class="block-32" :src="imgWechatUrl+'/order/icon-select-2.png'"></image>
						</view>
						<view class="text-sm text-666 ml-16">{{i18n['匿名评价']}}</view>
					</view>
				</view>
			</block>
		</view>
		<button class="submit-btn" @click="handleSubmit">{{i18n['提交']}}</button>
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	import fuUpload from "../../components/fu-upload/fu-upload.vue";
	// import fuUploadVideo from "../../components/fu-upload-video/fu-upload-video.vue";
	export default {
		components: {
			fuUpload,
			// fuUploadVideo,
		},
		data() {
			return {
				levels: [1, 2, 3, 4, 5],
				level: 5,
				imgs: [],
				imgs_ids: [],
				anonymous: false,
				marks: "",
				images: [],
				imgWechatUrl:this.imgWechatUrl,
				star_txt: global.i18n["非常好"],
				order_sn: null,
				goods_thumb: null,
				goods_name: "",
				order_goods_list: [], // 商品数据
				commentsArray: [], // 评价统计数组
				isclick: false, // 防误触
				itemIndex: -1, // 列表角标
			};
		},
		methods: {
			// 切换是否匿名
			handleSwitch(index) {
				this.commentsArray[index].anonymous = !this.commentsArray[index].anonymous;
			},
			chooseImages(val, index) {
				this.commentsArray[index].thumb = val;
			},
			chooseVideo(val, index) {
				this.commentsArray[index].video = String(val);
			},
			changeLevel(num, index) {
				this.commentsArray[index].star = num;
				switch (num) {
					case 1:
						this.commentsArray[index].star_txt = this.i18n["非常差"];
						break;
					case 2:
						this.commentsArray[index].star_txt = this.i18n["差"];
						break;
					case 3:
						this.commentsArray[index].star_txt = this.i18n["一般"];
						break;
					case 4:
						this.commentsArray[index].star_txt = this.i18n["好"];
						break;
					case 5:
						this.commentsArray[index].star_txt = this.i18n["非常好"];
						break;
				}
			},
			//提交评价
			handleSubmit() {
				if (this.isclick) {
					this.$message.info(this.i18n["您的手速太快了"]);
					return;
				};
				this.isclick = true;
				setTimeout(() => {
					this.isclick = false;
				}, 2000)
				const uid = (global.userInfo && global.userInfo.id) || 0;
				let flag = false;
				this.commentsArray.forEach(val => {
					if (!val.content.trim()) {
						flag = true;
						return;
					}
				})
				if (flag) {
					this.$message.info(this.i18n["请输入您对该商品评论内容"]);
					return;
				}
				let goods_comment = [];
				this.commentsArray.forEach(val => {
					goods_comment.push({
						star: val.star,
						content: val.content,
						thumb: val.thumb,
						video: val.video,
						type: val.anonymous ? 1 : 0,
						goods_id: val.goods_id,
						sku_id: val.sku_id
					})
				})
				goods_comment.forEach(item => {
				  item.thumb =item.thumb.join(",")
				})
				let data = {
					user_id: uid,
					order_sn: this.order_sn,
					goods_comment: JSON.stringify(goods_comment)
				};
				// console.log(data,'data');
				this.$api.post(global.apiUrls.postOrderEvaluate, data).then((res) => {
					if (res.data.code == 1) {
						this.$message.info(this.i18n["评论成功"]);
						// 通知列表页面更新数据
						uni.$emit('onPageUpdata', {
							type: 5, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单， 5: 评价
							index: this.itemIndex
						});
						// 通知详情页面更新数据
						uni.$emit('onOrederDetailPageUpdata');
						setTimeout(() => {
							uni.navigateBack();
						}, 800);
					} else {
						this.$message.info(res.data.msg);
					}
				});
			},
		},
		onLoad(options) {
			const {
				order_sn,
				order_type,
				itemIndex
			} = options;
			this.order_type = order_type;
			this.order_sn = order_sn;
			this.itemIndex = itemIndex;
			let order_goods_list = JSON.parse(uni.getStorageSync("order_goods_list"));
			if (order_goods_list) {
				this.order_goods_list = order_goods_list;
				let commentsArray = [];
				order_goods_list.forEach(val => {
					commentsArray.push({
						thumb: [],
						star: 5,
						content: '',
						anonymous: false,
						star_txt: this.i18n["非常好"],
						sku_id: val.sku_id,
						goods_id: val.goods_id,
						order_sn: val.order_sn
					})
				})
				this.commentsArray = commentsArray;
			}
		},
		onUnload() {
			uni.removeStorageSync("order_goods_list");
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding-bottom: 120rpx;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
		background: #f1f1f1;
	}

	.floor-title {
		height: 80upx;
		font-weight: bold;
	}

	.floor_marks {
		width: 100%;

		.floor_marks-content {
			width: 100%;
			font-size: 24rpx;
		}
	}

	.floor_imgs {
		image {
			margin-right: 20upx;
		}
	}

	.submit-btn {
		position: fixed;
		bottom: 50rpx;
		bottom: calc(50rpx + constant(safe-area-inset-bottom));
		bottom: calc(50rpx + env(safe-area-inset-bottom));
		left: 32rpx;
		right: 32rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		z-index: 9999;
		background: $bgtheme;
	}

	.evaluate-level {
		font-size: 32rpx;
		color: #333333;
		line-height: 62rpx;
	}

	.img-32 {
		width: 32rpx;
		height: 32rpx;
	}

	.star_txt {
		font-size: 26rpx;
		color: #666;
		padding-left: 20rpx;
	}

	.block-200 {
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
	}

	.comment-item-list {
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.comment-item:first-child {
		margin-top: 20rpx;
	}

	.comment-item {
		border-radius: 16rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.plr-24 {
		padding: 0 24rpx;
	}

	.h-110 {
		height: 110rpx;
	}

	.textarea-box {
		width: 100%;
		height: 272rpx;
		background-color: #F8F8F8;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 20rpx;
		color: #333333;
		font-size: 28rpx;
		word-break: break-all;
	}

	.placeholderClass2 {
		font-size: 28rpx;
		color: #999999;
		// padding: 20rpx;
	}

	.ml-16 {
		margin-left: 16rpx;
	}

	.block-32 {
		width: 32rpx;
		height: 32rpx;
	}
</style>
